<template>
	<view class="orderList" > 
		<view class="menulist">
			<view class="item_class">
				<view class="pay items" @click="getAllOrder " :class="{'active': num == 'all' }">
					可接单
				</view>
				<view class="pay items" @click="showItem( 3 ) " :class="{'active': num ==3 }">
					待支付
				</view>
				<view class="waitserve items" @click="showItem( 4 ) " :class="{'active': num ==4 }">
					待服务
				</view>
				<view class="waitpay items" @click="showItem( 5 ) " :class="{'active': num ==5 }">
					服务中
				</view>
				<view class="waitpay items" @click="showItem( 6 ) " :class="{'active': num ==6 }">
					待结算
				</view>
				<view class="done items" @click="showItem( 7 ) " :class="{'active': num == 7 }">
					已完成
				</view>
				<view class="done items" @click="showItem( 8 ) " :class="{'active': num == 8 }">
					用户取消
				</view>
			</view>
		</view>
		<view class="order_item" v-for="(order, index) in orderList" :key="index" >
			<view class="item">
				<view class="top">
					<view class="user_info">
						<view class="avatar">
							<image src="../../../static/icon/avatar.png" mode=""></image>
						</view>
						<view class="user_name">
							{{ order.username }}
						</view>
					</view>
					<view class="far" style="color: #007AFF;">
						服务面积:   {{ parseInt(order.acreage) != null ? parseInt(order.acreage) : 0 }}㎡
					</view>
				</view>
				<!-- 服务内容 -->
				<!-- <view class="content">
					<view class="content_item" style="color: #007AFF;">
						#{{ order.name }}#
					</view>
				</view> -->
				<!-- info -->
				<view class="address">
					<view class="stitle" style="color: #007AFF;">服务项目:</view>
					<view class="scontent">
						{{ order.name }} 
					</view>
				</view>
				<view class="address">
					<view class="stitle" style="color: #007AFF;">服务地址:</view>
					<view class="scontent">
						{{ order.nativenative }} {{ order.address }}
					</view>
				</view>
				
				<view class="address">
					<view style="color: #007AFF;" class="stitle">服务备注:</view> <view class="scontent" v-if="order.remark"> {{ order.remark }} </view> 
					<button v-else class="music" type="info" style="font-size: 30rpx;" @click="musicPlay(order)">播放备注音频</button>
				</view>
				<!-- baojia -->
				<view class="sub_btn">
					<button type="primary" @click="sendPrice(order)">报价</button>
				</view>
			</view>
		</view>
		
		<view class="btnbox" style="padding: 20rpx 30rpx;">
			<button  @click="getAllOrder(2)">刷新订单</button>
		</view>
	</view>
</template>

<script>
	var mp = uni.createInnerAudioContext()
	const voiceReciver = uni.getRecorderManager();
	export default {
		data() {
			return {
				orderList: [],
				num: "",
			}
		},
		props:{
			dialog: Object,
			formData: Object
		},
		computed: {
			navbar() {
				return this.$store.state.navbar
			},
			city() {
				return this.$store.state.userInfo.city
			},
		},
		
		mounted() {
			this.getLocaltion()
			this.setTime()
		},
		methods: {
			// 过滤用户订单
			showItem( num ) {
				this.num = num
			},
			// 定时获取订单
			setTime() {
				setInterval(() => {
					this.getAllOrder()
				}, 1000 * 10)
			},
			
			// 播放语音
			musicPlay(item) {
				mp.src = item.voice;
				mp.play()
			},
			// 获取所有订单
			async getAllOrder( type ) {
				this.num = "all"
				let res = await this.$Request("POST","/order/orderlist",{ city: this.city, })
				 // console.log(res)
				this.orderList = res.data.data
				if(this.orderList && type == 2) {
					uni.showToast({
						title: "刷新成功",
						icon: "success"
					})
				}
			},
			// 获取位置
			getLocaltion() {
				//console.log(1);
				let self = this
				uni.getLocation({
				    type: 'gcj02',
					geocode: true,
				    success: function (res) {
				        //console.log(res);
						self.width = res.latitude
						self.height = res.longitude
						self.getCity()
				    }
				});
			},
			// 获取城市
			getCity() {
				let self = this
				if(this.width && this.height) {
					uni.request({
						url: `https://apis.map.qq.com/ws/geocoder/v1/?location=${self.width},${self.height}&key=${self.$apikey}`,
						data: {},
						success:( city ) => {
							// console.log(city);
							self.$store.commit("getUserInfo", city.data.result.ad_info)
							self.getAllOrder()
						}
					})
				}
			},
			// 报价
			sendPrice( item ) {
				this.$emit("orderChange", item)
			},
		},
		
		
	}
</script>

<style lang="scss" scoped>
	.orderList {
		width: 100%;
		box-sizing: border-box;
		.menulist {
			width: 100%;
			overflow-x: scroll;
			&::-webkit-scrollbar {
				display: none;
			}
			.item_class  {
				width: 1200rpx;
				box-sizing: border-box;
				padding: 0rpx 10rpx;
				display: flex;
				
				overflow: scroll;
				font-size: 30rpx;
				.items {
					width: 150rpx;
					box-sizing: border-box;
					padding: 10rpx 0;
					text-align: center;
					cursor: pointer;
					height: 80rpx;
					line-height:80rpx;
				}
			}
		}
		.order_item {
			width: 100%;
			padding: 20rpx;
			box-sizing: border-box;
			.item {
				width: 100%;
				box-sizing: border-box;
				padding: 20rpx;
				border: 1px solid #f2f2f2;
				border-radius: 30rpx;
				box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
				.top {
					width: 100%;
					box-sizing: border-box;
					display: flex;
					align-items: center;
					justify-content: space-between;
					border-bottom: 1px solid #f2f2f2;
					.user_info {
						display: flex;
						height: 100rpx;
						align-items: center;
						
						.avatar {
							width: 80rpx;
							height: 80rpx;
							overflow: hidden;
							border-radius: 50%;
							background-color: #fff;
							border: 1px solid #f2f2f2;
							image {
								width: 80rpx;
								height: 80rpx;
							}
						}
						.user_name {
							margin-left: 20rpx;
						} 
					}
					.far {
						color: #666;
					}
				}
				.content {
					width: 100%;
					box-sizing: border-box;
					padding: 30rpx;
					display: flex;
					align-items: center;
					flex-wrap: wrap;
					overflow: hidden;
					.content_item {
						color: #007AFF;
						margin: 10rpx;
					}
				}
				.address {
					width: 100%;
					margin: 20rpx 0;
					box-sizing: border-box;
					display: flex;
					align-items: center;
					.stitle {
						margin-right: 20rpx;
						width: 200rpx;
					}
					.scontent {
						flex: 1;
						color: #C0C0C0;
						font-size: 30rpx;
					}
					.music {
						flex:1;
						box-sizing: border-box;
						text-align: center;
						cursor: pointer;border: 1px solid #f2f2f2;
						
					}
				}
				.sub_btn {
					width: 100%;
				}
			}
		}
	}
</style>
